<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>翻书效果</title>
  <style>
    /* 基本样式 */
    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
      overflow: hidden;
      animation: bg-animate 15s ease-in-out infinite alternate;
      position: relative;
    }

    @keyframes bg-animate {
      0% {
        background: linear-gradient(135deg, #ff9a9e, #fad0c4);
      }
      25% {
        background: linear-gradient(135deg, #fad0c4, #fbc2eb);
      }
      50% {
        background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
      }
      75% {
        background: linear-gradient(135deg, #a6c1ee, #c8d2eb);
      }
      100% {
        background: linear-gradient(135deg, #c8d2eb, #ff9a9e);
      }
    }

    /* 流星动画 */
    .shooting-star {
      position: absolute;
      top: -100px;
      width: 2px;
      height: 100px;
      background: rgba(255, 255, 255, 0.7);
      transform: rotate(45deg);
      opacity: 0;
      animation: shoot 3s linear infinite;
    }

    @keyframes shoot {
      0% {
        top: -100px;
        left: 0;
        opacity: 0;
      }
      20% {
        opacity: 1;
      }
      80% {
        opacity: 1;
      }
      100% {
        top: 110%;
        left: 100%;
        opacity: 0;
      }
    }

    /* 随机生成多个流星动画 */
    .shooting-star:nth-child(1) {
      animation-delay: 0s;
      left: 10%;
    }

    .shooting-star:nth-child(2) {
      animation-delay: 3s;
      left: 30%;
    }

    .shooting-star:nth-child(3) {
      animation-delay: 6s;
      left: 50%;
    }

    .shooting-star:nth-child(4) {
      animation-delay: 9s;
      left: 70%;
    }

    .shooting-star:nth-child(5) {
      animation-delay: 12s;
      left: 90%;
    }

    .book {
      position: relative;
      width: 1200px;
      height: 800px;
      perspective: 1000px;
      border: 2px solid #4CAF50;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 0 5px #4caf50 inset;
      overflow: hidden;
      background: white;
      border-radius: 10px;
      margin-bottom: 20px;
      z-index: 2;
    }

    .page {
      position: absolute;
      width: 50%;
      height: 100%;
      background: white;
      backface-visibility: hidden;
      transition: transform 0.5s;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .left-page {
      left: 0;
      border-right: 1px solid #ccc;
      padding: 20px;
      box-sizing: border-box;
    }

    .right-page {
      right: 0;
      padding: 20px;
      box-sizing: box-border;
    }

    .flip-left {
      transform: rotateY(-180deg);
    }

    .flip-right {
      transform: rotateY(180deg);
    }

    .controls {
      display: flex;
      justify-content: center;
      gap: 10px;
      z-index: 2;
    }

    .controls button {
      padding: 10px 20px;
      font-size: 16px;
      color: white;
      background-color: #4caf50;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      transition: background-color 0.3s, transform 0.3s;
    }

    .controls button:hover {
      background-color: #45a049;
      transform: scale(1.05);
    }

    .controls button:disabled {
      background-color: #cccccc;
      cursor: not-allowed;
    }
  </style>
</head>
<body>

  <!-- 流星动画 -->
  <div class="shooting-star"></div>
  <div class="shooting-star"></div>
  <div class="shooting-star"></div>
  <div class="shooting-star"></div>
  <div class="shooting-star"></div>

  <!-- 翻书容器 -->
  <div class="book">
    <div class="page left-page" id="leftPage"></div>
    <div class="page right-page" id="rightPage"></div>
  </div>

  <!-- 控制按钮 -->
  <div class="controls">
    <button id="prevPage">上一页</button>
    <button id="nextPage">下一页</button>
    <button id="uploadLeft">上传左页图片</button>
    <button id="uploadRight">上传右页图片</button>
    <button id="addPage">新增页面</button>
    <button id="savePages">保存图片</button>
  </div>

  <!-- JS 脚本部分 -->
  <script>
    // 尝试从 localStorage 加载数据
    const savedPages = JSON.parse(localStorage.getItem('bookPages'));
    let currentPage = 0;
    const pages = savedPages ? savedPages : [{ left: '', right: '' }];

    function updatePages() {
      const leftPage = document.getElementById('leftPage');
      const rightPage = document.getElementById('rightPage');

      leftPage.style.backgroundImage = `url(${pages[currentPage].left})`;
      rightPage.style.backgroundImage = `url(${pages[currentPage].right})`;

      if (currentPage === 0) {
        document.getElementById('prevPage').disabled = true;
      } else {
        document.getElementById('prevPage').disabled = false;
      }

      if (currentPage === pages.length - 1) {
        document.getElementById('nextPage').disabled = true;
      } else {
        document.getElementById('nextPage').disabled = false;
      }
    }

    // 保存按钮事件
    document.getElementById('savePages').addEventListener('click', () => {
      localStorage.setItem('bookPages', JSON.stringify(pages));
      alert('图片已保存！');
    });

    // 上一页
    document.getElementById('prevPage').addEventListener('click', () => {
      if (currentPage > 0) {
        currentPage--;
        updatePages();
      }
    });

    // 下一页
    document.getElementById('nextPage').addEventListener('click', () => {
      if (currentPage < pages.length - 1) {
        currentPage++;
        updatePages();
      }
    });

    // 上传左页图片
    document.getElementById('uploadLeft').addEventListener('click', () => {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = 'image/*';

      input.onchange = (e) => {
        const file = e.target.files[0];
        const reader = new FileReader();

        reader.onload = (event) => {
          pages[currentPage].left = event.target.result;
          updatePages();
        };

        reader.readAsDataURL(file);
      };

      input.click();
    });

    // 上传右页图片
    document.getElementById('uploadRight').addEventListener('click', () => {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = 'image/*';

      input.onchange = (e) => {
        const file = e.target.files[0];
        const reader = new FileReader();

        reader.onload = (event) => {
          pages[currentPage].right = event.target.result;
          updatePages();
        };

        reader.readAsDataURL(file);
      };

      input.click();
    });

    // 新增页面
    document.getElementById('addPage').addEventListener('click', () => {
      pages.push({ left: '', right: '' });
      currentPage = pages.length - 1;
      updatePages();
    });

    updatePages();
  </script>
</body>
</html>
